@import 'shared';

:local(.room-settings-form) {
  @extend %centered-flex-column;
  padding: 1em;
}

:local(.subtitle) {
  margin: 1em;
  margin-top: 0;
  font-size: 12pt;
  color: var(--menu-header-text-color);
  text-align: left;
  font-weight: normal;
  text-transform: uppercase;
  width: 100%;
}

:local(.name-field) {
  @extend %input-field;
  margin-bottom: 1.5em;
  margin-top: 0;
}
:local(.member-cap-container){
  width: 100%;
  position: relative;
}

:local(.description-field) {
  @extend %input-textarea;
  margin-bottom: 1.5em;
  margin-top: 0;
}

:local(.next-button), :local(.continue-button) {
  @extend %action-button;
  margin-top: 1em;
}

:local(.permissions) {
  margin-bottom: 1em;
  text-align: left;
  width: 100%;
}

:local(.permissions-group) {
  padding-left: 1em;
}

:local(.select-container) {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-bottom: 1em;
  width: 100%;

  input {
    @extend %radio;
  }

  input:checked {
    @extend %radio-checked;
  }

  span {
    color: var(--panel-subtext-color);
    font-size: 0.8em;
  }

  label {
    margin-bottom: 1em;
    display: flex;
    align-items: center;

    div {
      display: flex;
      flex-direction: column;
    }
  }
}

:local(.permission-disabled) {
  color: var(--panel-widget-disabled-color);
}

:local(.permission-disabled input) {
  cursor: auto;
}

:local(.permission input) {
  @extend %checkbox;
  vertical-align: middle;
  margin: 0.5em;
}

:local(.permission input:checked) {
  @extend %checkbox-checked;
}
